<script setup>
import custromHeader from '@/components/custromHeader.vue'
import moveList from '@/components/movieList.vue'
import custromFooter from '@/components/footer.vue'
import {onMounted, reactive} from 'vue'
import {requestHomeData} from '@/api/home'
import {useRoute,useRouter} from 'vue-router'


/**
 * @description 当前页面展示的数据
 * @name colication
 * @property {array} hit_array 热播数组
 * @property {array} film_array 电影
 * @property {array} anime_array 动漫
 * @property {array} variety_array 综艺
 * 
*/
let colication = reactive({
  hit_array:[],
  film_array:[],
  anime_array:[],
  variety_array:[],
  soap_opera_array:[]
})

let cate_title_array = reactive([])

let requestHome = async () => {
  let {data:res} = await requestHomeData()
  console.log('res',res);
  if (res.code == 200) {
    colication.hit_array = res.data.colication.hit_array.slice(0,6)
    colication.film_array = res.data.colication.film_array
    colication.anime_array = res.data.colication.anime_array
    colication.variety_array = res.data.colication.variety_array
    colication.soap_opera_array = res.data.colication.soap_opera_array
    cate_title_array = res.data.cate_title_array
  }
}

const router = useRouter()
// 跳转
let goDetail = (item) => {
  console.log('item',item);
  router.push({path:'/detail',query:{
    path:item.item_path
  }})
}

onMounted(()=>{
    requestHome()
})
</script>

<template>
  <div class="home-container">
    <custromHeader :menu-list="cate_title_array"></custromHeader>
    <div class="body-container">
      <div class="hit-movie-container">
        <div class="hit-title" style="width: 100%;"><h2 style="display: block;width: 1300px;max-width: 100%;margin: 20px auto;">热门影视</h2></div>
        <div class="hit-movie-center">
          <ul class="hit-movie-list">
            <li class="hit-movie-item" v-for="(item,index) in colication.hit_array" :key="index">
              <div class="top">
                <img @click="goDetail(item)" class="movie-cover" v-lazy="item.item_cover" alt="" srcset="">
              </div>
              <div class="bottom">
                <div class="movie-title">{{ item.item_title }}</div>
                <div class="movie-date">{{ item.item_date}}·{{ item.item_type}}</div>
              </div>
              <div class="tag">{{ item.item_other }}</div>
              <div class="model">
              </div>
            </li>
          </ul>
        </div>
      </div>
      <moveList cate-title="电影" :movie-list="colication.film_array"></moveList>
      <moveList cate-title="电视剧" :movie-list="colication.soap_opera_array"></moveList>
      <moveList cate-title="动漫" :movie-list="colication.anime_array"></moveList>
      <moveList cate-title="综艺" :movie-list="colication.variety_array"></moveList>
    </div>
    <custrom-footer></custrom-footer>
  </div>
</template>

<style lang="less" scoped>
.home-container {
    // background-color: rgb(239, 243, 245);
}
.body-container {
    width: 100%;
    min-height: 40vh;
    // background-color: rgb(239, 243, 245);
}

// 热播
.hit-movie-container {
  background: rgb(255, 255, 255);
  width: 100%;
  // max-width: 100%;
  .hit-movie-center {
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    background: rgb(255, 255, 255);
    .hit-movie-list {
      display: flex;
      width: 100%;
      .hit-movie-item {
        position: relative;
        box-sizing: border-box;
        width: 16.66666666666667%;
        padding-right: 24px;
        padding-bottom: 24px;
        .top {
          width: 100%;
          overflow: hidden;
          border-radius: 12px;
          .movie-cover {
            position: relative;
            border-radius: 12px;
            width: 100%;
            height: 280px;
            object-fit: cover;
            transition: .3s;
            overflow: hidden;    
            cursor: pointer;      
            &:hover {
              transform: rotate(5deg) scale(1.4);
            }
          }
        }
        .bottom {
          .movie-title {
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 16px;
            color: #000000;
            padding: 6px 0px;
          }
          .movie-date {
            box-sizing: border-box;
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 14px;
            color: #666565;
            // padding: 6px 0px;
          }
        }
        .tag {
          position: absolute;
          right: 34px;
          top: 10px;
          background: rgb(133, 77, 250,.5);
          color: #fff;
          font-size: 12px;
          padding: 3px 5px;
          border-radius: 6px;
        }
      }
    }
  }
}

@media screen and (max-width:480px){
  .hit-movie-list {
    flex-wrap: wrap;
  }
  .hit-movie-item {
    width: 33.33333333333333% !important;
     padding-right: 4px !important;
        padding-bottom: 4px !important;
        border-radius: 4px !important;
        .top {
          border-radius: 4px !important;
        }
        .movie-cover {
          border-radius: 4px !important;
          height: 200px !important;
        }
  }
}
</style>